import React, { useState } from 'react';
import styles from './index.less';
import { history } from 'umi';
import { Button, Form, Input, message, Upload, Steps } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Map } from 'react-bmapgl';

const items = [
  {
    title: '注册须知',
    description: '确认注册须知内容',
  },
  {
    title: '门店描述',
    description: '完善门店基本信息',
  },
  {
    title: '资质上传',
    description: '确认门店开店资质',
  },
];
const getBase64 = (img: any, callback: any) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
};
const beforeUpload = (file: any) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};

export default function index() {
  const [current, setcurrent] = useState(0);
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const Ditumap = (e) => {
    console.log(e.latlng);
  };
  type FieldType = {
    门店名称?: string;
    门店位置?: string;
    门店logo?: string;
    门店照片?: string;
  };

  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();
  const handleChange = (info: any) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (url: any) => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        Upload
      </div>
    </div>
  );
  return (
    <div className={styles.registerbox}>
      <div className={styles.top}>OMINI回收平台·门店注册</div>
      <div className={styles.steps}>
        <Steps current={current} items={items} />
      </div>
      <div
        className={styles.main}
        style={{ display: current === 0 ? 'block' : 'none' }}
      >
        <div className={styles.one}>
          <h5>
            1、我在OMINI回收已经开了个店了，我用别人的身份证再开一个店可以吗？
          </h5>
          <div>
            答：不可以。未经OMINI回收平台同意，将本人OMINI回收账号提供给他人做开店使用，由此导致相关争议，诉讼及因店铺经营中的违法违规行为导致一切人身，财产权益损害，均由本人自行承担全部民事、行政及刑事责任。
          </div>
          <h5>2、开企业店铺需要满足什么条件？</h5>
          <div>
            答：企业开店需完成支付宝认证和责任人认证，店铺负责人需要对该OMINI回收店铺的运营及管理全面负责，包含但不限于：该企业的法定代表人、股东、OMINI回收店铺的运营人等，具体请参考：企业店铺开店流程。
          </div>
          <h5>3、我可以开多个店铺吗？</h5>
          <div>
            答：同一会员已开设的店铺均须同时满足以下要求，才能获得多店权益：
          </div>
          <div>
            （一）近365天无出售假冒商品违规、严重违规、一般违规扣分达12分（含）以上等违规记录，且无其他风险特征；
          </div>
          <div>
            （二）满足一定经营条件（如近365天确认收货金额&lt;=120万且近12个自然月持续有成交）
          </div>
          <h5>
            4、我已经开过OMINI回收店，现在想要注销原来的店铺重新开店，可以吗?
          </h5>
          <div>答：满足条件就可以注销。具体请参考：如何注销OMINI回收店铺。</div>
        </div>
        <div className={styles.but}>
          <Button
            type="primary"
            danger
            style={{ marginRight: '20px' }}
            size="large"
            onClick={() => history.push('/login')}
          >
            拒绝
          </Button>
          <Button
            type="primary"
            size="large"
            onClick={() => setcurrent(current + 1)}
          >
            我已同意并阅读
          </Button>
        </div>
      </div>
      <div
        className={styles.main}
        style={{ display: current === 1 ? 'block' : 'none' }}
      >
        <div className={styles.one}>
          <div className={styles.systemform}>
            <div className={styles.formleft}>
              <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{
                  maxWidth: 600,
                  marginTop: '50px',
                  // marginRight: '150px',
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item<FieldType>
                  label="门店名称"
                  name="门店名称"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your 门店名称!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>

                <Form.Item<FieldType>
                  label="门店位置"
                  name="门店位置"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your 门店位置!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
                <Form.Item<FieldType>
                  label="门店描述"
                  name="门店描述"
                  rules={[
                    {
                      required: true,
                      message: 'Please input your 门店描述!',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 16, span: 16 }}>
                  <Button style={{ marginRight: '10px' }}>重置</Button>
                  <Button type="primary" htmlType="submit">
                    保存
                  </Button>
                </Form.Item>
              </Form>
            </div>
            <div className={styles.formright}>
              <h3 style={{ padding: '30px' }}>点击地图选择你的门店位置</h3>
              <div style={{ width: '80%', margin: '0 auto' }}>
                <Map
                  center={new BMapGL.Point(116.404449, 39.914889)}
                  zoom={12}
                  heading={0}
                  tilt={40}
                  // onClick={(e: any) => console.log(e.latlng)}
                  onClick={Ditumap}
                  enableScrollWheelZoom
                />
              </div>
            </div>
          </div>
        </div>
        <div className={styles.but}>
          <Button
            type="primary"
            ghost
            style={{ marginRight: '20px', background: '#fff' }}
            size="large"
            onClick={() => setcurrent(current - 1)}
          >
            上一步
          </Button>
          <Button
            type="primary"
            size="large"
            onClick={() => setcurrent(current + 1)}
          >
            下一步
          </Button>
        </div>
      </div>
      <div
        className={styles.main}
        style={{ display: current === 2 ? 'block' : 'none' }}
      >
        <div className={styles.one}>
          <div className={styles.systemform}>
            <div className={styles.formleft}>
              <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{
                  maxWidth: 600,
                  marginTop: '50px',
                  // marginRight: '150px',
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item<FieldType>
                  label="注册人姓名"
                  name="name"
                  rules={[
                    {
                      required: true,
                      message: '请输入姓名',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
                <Form.Item<FieldType>
                  label="注册人身份证号"
                  name="idcard"
                  rules={[
                    {
                      required: true,
                      message: '请输入身份证号！',
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
                <Form.Item<FieldType> label="注册名称" name="zcname">
                  <Input />
                </Form.Item>
                <Form.Item<FieldType> label="社会信用代码证号" name="idsh">
                  <Input />
                </Form.Item>
                <Form.Item<FieldType> label="税务登记证号" name="asad">
                  <Input />
                </Form.Item>
                <Form.Item<FieldType> label="注册地址" name="dfgsdfgs">
                  <Input />
                </Form.Item>
              </Form>
            </div>
            <div className={styles.formright}>
              <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{
                  maxWidth: 600,
                  marginTop: '50px',
                  // marginRight: '150px',
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item
                  label="注册人手持身份证照片"
                  name="注册人手持身份证照片"
                >
                  <Upload
                    name="avatar"
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                  >
                    {imageUrl ? (
                      <img
                        src={imageUrl}
                        alt="avatar"
                        style={{
                          width: '100%',
                        }}
                      />
                    ) : (
                      uploadButton
                    )}
                  </Upload>
                </Form.Item>
                <Form.Item label="社会信用代码证照片" name="社会信用代码证照片">
                  <Upload
                    name="avatar"
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                  >
                    {imageUrl ? (
                      <img
                        src={imageUrl}
                        alt="avatar"
                        style={{
                          width: '100%',
                        }}
                      />
                    ) : (
                      uploadButton
                    )}
                  </Upload>
                </Form.Item>
                <Form.Item label="税务登记证照片" name="税务登记证照片">
                  <Upload
                    name="avatar"
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                  >
                    {imageUrl ? (
                      <img
                        src={imageUrl}
                        alt="avatar"
                        style={{
                          width: '100%',
                        }}
                      />
                    ) : (
                      uploadButton
                    )}
                  </Upload>
                </Form.Item>
              </Form>
            </div>
          </div>
        </div>
        <div className={styles.but}>
          <Button
            type="primary"
            ghost
            style={{ marginRight: '20px', background: '#fff' }}
            size="large"
            onClick={() => setcurrent(current - 1)}
          >
            上一步
          </Button>
          <Button
            type="primary"
            size="large"
            onClick={() => history.push('/home')}
          >
            完成
          </Button>
        </div>
      </div>
    </div>
  );
}
